<template>
  <div class="con">
    <div class="contbox6_10">
      <div class="titlelist6_10">活动管理 / 活动明细</div>
      <div class="content">
        <div class="sousuojg6_10">
          <el-form
            label-width="80px"
            :model="searchFrom"
            class="demo-form-inline"
          >
            <el-form-item label="归属OEM">
              <el-input
                v-model="searchFrom.oemName"
                placeholder="请输入归属OEM"
              ></el-input>
            </el-form-item>
            <el-form-item label="归属机构">
              <el-input
                v-model="mechanism"
                readonly
                @focus="selectInstitution"
                placeholder="请输入归属机构"
              ></el-input>
            </el-form-item>
            <el-form-item label="活动类型">
              <el-select
                class="appointVip"
                v-model="searchFrom.activeType"
                placeholder="请选择"
              >
                <el-option
                  v-for="(val, index) in paizi"
                  :label="val.label"
                  :value="val.value"
                  :key="index"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机构名称">
              <el-input
                v-model="searchFrom.officeName"
                placeholder="请输入机构名称"
              ></el-input
            ></el-form-item>
            <el-form-item label="手机号">
              <el-input
                v-model="searchFrom.officePhone"
                placeholder="请输入机构电话"
              ></el-input
            ></el-form-item>
            <el-form-item label="活动名称">
              <el-input
                v-model="searchFrom.activeName"
                placeholder="请输入活动名称"
              ></el-input
            ></el-form-item>
            
            <el-form-item label="品牌名称">
              <el-select
                v-model="searchFrom.channelUid"
                placeholder="请选择品牌名称"
              >
             
                <el-option
                  v-for="item in paizis"
                  :label="item.channelName"
                  :value="item.uid"
                  :key="item.uid"
                ></el-option
              ></el-select>
            </el-form-item>
            <div class="">
              <el-form-item label="奖励时间">
                <!-- <span class="demonstration">默认</span> -->
                <el-date-picker
                  value-format="yyyy-MM-dd"
                  class="selectTime"
                  style="width: 300px"
                  v-model="searchFrom.timer"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                ></el-date-picker
              ></el-form-item>
            </div>
            
          </el-form>
        </div>
        <div class="buttons">
          <el-button v-if="isAuth('activityDetailSearch')" type="primary" @click="search">搜索</el-button>
          <el-button v-if="isAuth('activityDetailReset')" @click="reset">重置</el-button> 
          <el-button class="butt" type="primary" style="margin-left:40px" @click="handExport">批量导出</el-button>
        </div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
          stripe
          border
          :row-style="{ height: '0px' }"
          :cell-style="{ padding: '0px' }"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" min-width="55"></el-table-column>
          <el-table-column
            prop="oemName"
            label="归属OEM"
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="parentName"
            label="归属机构"
            min-width="120"
          ></el-table-column>
          <el-table-column prop="officeName" show-overflow-tooltip label="机构名称" min-width="120">
          </el-table-column>
          <el-table-column
            prop="officePhone"
            label="手机号"
            show-overflow-tooltip
            width="100"
          ></el-table-column>
          <el-table-column
            prop="activeName"
            label="活动名称"
            show-overflow-tooltip
            width="200"
          ></el-table-column>
          <el-table-column prop="" min-width="120" label="活动类型">
            <template slot-scope="scope">
              <span v-if="scope.row.activeType == 5">排名奖励活动</span>
              <span v-if="scope.row.activeType == 6">伙伴拉新活动</span>
              <span v-if="scope.row.activeType == 7">商户拉新活动</span>
              <span v-if="scope.row.activeType == 9">开通奖励活动</span>
              <span v-if="scope.row.activeType == 10">定时达标活动</span>
              <span v-if="scope.row.activeType == 11">次月达标活动</span>
              <span v-if="scope.row.activeType == 12">周期达标活动</span>
              <span v-if="scope.row.activeType == 3">单品返现活动</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="channelName"
            label="品牌名称"
            show-overflow-tooltip
            min-width="120"
          ></el-table-column>
          <el-table-column
            prop="rewardAmt"
            label="奖励金额"
            show-overflow-tooltip
            min-width="80"
          ></el-table-column>
          <el-table-column
            prop="actualDate"
            show-overflow-tooltip
            label="奖励时间"
            min-width="155"
          ></el-table-column>
        </el-table>
        <div class="btn" style="margin-top: 20px">
          <el-pagination
            background
            style="text-align: right; "
            class="pagination"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="searchFrom.page"
            :page-size="searchFrom.number"
            :total="total"
          ></el-pagination>
        </div>
      </div>
    </div>
    <Tree :showType="showType" @func="transmit" />
  </div>
</template>

<script>
import axios from "axios";
import Tree from "../tree/index";
import { date } from "../../assets/js/commion";
import https from '../../plugins/https';
import {exportFile } from "../../plugins/expord"
export default {
  data() {
    return {
      SelectData: [],
      mechanism: null,
      showType: false,
      tingStatus: "",
      total: "",
      page: 1,
      number: 10,
      paizi: [
        { value: "", label: "全部" },
        { value: "5", label: "排名奖励活动" },
        { value: "6", label: "伙伴拉新活动" },
        { value: "7", label: "商户拉新活动" },
        { value: "9", label: "开通奖励活动" },
        { value: "10", label: "定时达标活动" },
        { value: "11", label: "次月达标活动" },
        { value: "12", label: "周期达标活动" },
        { value: "3", label: "单品返现活动" }
      ],
      name: this.$route.query.name,
      //全选
      checkedAll: true,
      //搜素需要提交的
      searchFrom: {
        channelUid:"",
        activeType: "",
        idList: [],
        officeUid: "",
        oemUid: localStorage.getItem("uid"),
        activeUid: this.$route.query.activeUid,
        officeName: "",
        oType: 0, //机构类型
        number: 20, //没页几条
        page: 1, //第几页
        codes: "", //机构ID
        name: "", //机构名称
        phone: "", //手机号码
        startDate: "", //活动开始时间
        endDate: "",
        activeName: "", //活动名称
        status: "", //状态
        timer: "" //时间
      },
      totalNum: 20,
      status: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "正常"
        },
        {
          value: 1,
          label: "停用"
        }
      ],
      paizis:[],
      checkedAll: false,
      //时间日期

      // 列表全选与否
      allSelect: false,
      //表格里面的数据
      tableData: null,
      multipleSelection: [],
      oemUid: null
    };
  },
  components: {
    Tree
  },
  created() {
    var _this = this;
    // 获取表格数据
    https.queryChannelNameList({oemUid:localStorage.getItem("uid")})
        .then(function(d) {
          if (d.data.code == "0000") {
            _this.paizis = d.data.data;
            console.log(_this.paizis)
            /*  _this.form.toOfficeUid = d.data.oemuid;*/
          } else {
            layer.open({
              content: d.data.msg,
              skin: "msg",
              time:  2 //1秒后自动关闭
            });
          }
        })
        .catch(function(error) {
          //axios请求失败回调
          console.log(error);
        });
    // alert(date.isDuringDate("2018-03-05","2019-03-03"))
    this.oemUid = localStorage.getItem("uid");
    this.getList();
    
  },
  methods: {
    // 选择机构
    transmit(data) {
      console.log(data.uid);
      //归属机构的uid
      // this.form.officeUid = data.uid;
      // console.log(this.form.officeUid)
      //归属机构名字
      this.mechanism = data.name;
      this.searchFrom.parentUid = data.uid;
      // alert(this.searchFrom.officeUid)
    },
    //设置取消的
    determine() {
      // alert("执行")
      this.showType = false;
    },
    selectInstitution() {
      this.showType = true;
    },
    //批量导出
    handExport() {
      if (this.SelectData.length > 0) {
        for (let i = 0; i < this.SelectData.length; i++) {
          //  let pl = { snUid: +this.SelectData[i].id };
          this.searchFrom.idList.push(+this.SelectData[i].id);
        }
      } else {
        this.searchFrom.idList = [];
      }
      var _this = this;
      exportFile("/api/active/activeOfficeDetail/excel/export",_this.searchFrom,"活动明细").then(res=>{
        return
      }).catch(err=>{
        console.log(err)
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },

    //获取列表
    getList() {
      this.searchFrom.rewardStartDate = this.searchFrom.timer[0];
      this.searchFrom.rewardEndDate = this.searchFrom.timer[1];
      console.log("下面是搜索条件");
      console.log(this.searchFrom);
      https.activeList(this.searchFrom)
        .then(res => {
          console.log("請求成功");
          console.log(res);
          this.tableData = res.data.data;
          //總頁數
          this.total = res.data.total;
          this.tingStatus = res.data.data;
          console.log(this.tingStatus);
        })
        .catch(err => {
          console.log(err);
        });
    },
    // ele的分页方法
    handleCurrentChange(val) {
      this.searchFrom.page = val;
      this.getList();
    },
    handleSizeChange(val) {
      this.searchFrom.page = val;
      this.getList();
    },
    handleClick(val) {
      console.log(val);
      let userId = val.activeUid;
      this.$router.push({
        path: "createActive",
        query: {
          uid: userId,
          isshow: true
        }
      });
    },
    // 判断状态
    isDuringDate(beginDateStr) {
      var curDate = new Date(),
        beginDate = new Date(beginDateStr.startDate),
        endDate = new Date(beginDateStr.endDate);
      if (curDate >= beginDate && curDate <= endDate) {
        return "进行中";
      } else if (curDate < beginDate) {
        return "未开始";
      } else if (curDate > endDate) {
        return "已结束";
      }
    },

    handleSelectionChange(val) {
      this.SelectData = val;

    },
    //上一页
    prev(val) {
      console.log(val);

    },
    //下一页
    next(val) {
      console.log(val);
    },
    qiehuan(val) {
      console.log(val);
    },
    // 重置
    reset() {
      this.searchFrom.channelUid=""
      this.searchFrom.parentUid = "";
      this.searchFrom.officeName = "";
      this.mechanism = "";
      this.searchFrom.number = 20; //没页几条
      this.searchFrom.page = 1; //第几页
      this.searchFrom.oemName = ""; //机构ID
      this.searchFrom.name = ""; //机构名称
      this.searchFrom.officePhone = ""; //手机号码
      this.searchFrom.rewardStartDate = ""; //活动开始时间
      this.searchFrom.rewardEndDate = "";
      this.searchFrom.activeName = ""; //活动名称
      this.searchFrom.activeType = ""; //状态
      this.searchFrom.timer = ""; //时间
      this.getList();
    },
    search() {
      console.log(this.searchFrom.status);
      console.log(this.searchFrom.timer);
      this.searchFrom.page = 1;
      this.getList();
    }
  }
};
</script>

<style scoped>
.con {
  position: relative;
}
.contbox6_10 {
  width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  float: left;
}
/deep/ .selectTime .el-range-separator {
  width: 80px;
}
.maiTitle {
  height: 50px;
  font-size: 16px;
  margin-top: 40px;
  color: #2f2c29;
}
.btn {
  align-items: center;
}
.exports {
  color: #409eff;
  margin-left: 20px;
  margin-top: 10px;
  float: left;
}
.info {
  display: flex;
  justify-content: center;
  align-items: center;
}
.subTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ebeef5;
  /* height: 50px; */
}
.statusColor {
  color: #67c23a;
}
.btnGroup {
  margin-bottom: 20px;
}
.activeTitle {
  font-size: 18px;
  color: #2f2c29;
  border-bottom: 2px solid black;
  height: 50px;
  line-height: 50px;
  margin-bottom: 50px;
}
@media screen and (max-width: 1600px) {
  .lister {
    width: 50% !important;
  }
}
@media screen and (max-width: 1010px) {
  .lister {
    width: 100% !important;
  }
}
.buttons > .el-button {
  width: 100px;
  padding: 7px;
   height: 32px;
}
</style>
